<template>
  <div class="kendoForm">
    <form
      id="kendoBusiForm"
      :ref="kendoForm.ref"
      v-kendo-validator="setup"
    >
      <div class="k-form-div">
        <div v-for="(item, index) in kendoUIFormItems" :key="index" class="k-form-item" :class="item.genre">
          <div v-if="item.genre !== 'special'" class="k-form-row">
            <label class="k-form-row-label">
              <i
                v-if="item.required"
                style="color: red; font-size: 16px; vertical-align: middle"
              >*</i>
              {{ item.label }}
            </label>
            <div
              v-if="item.controlType === 'dropDownList'"
              class="k-form-row-item"
            >
              <kendo-dropdownlist
                v-if="item.remoteData"
                :id="item.id"
                v-model="kendoUIParamsValue[item.paramName]"
                :name="item.name"
                :data-source-ref="item.ref"
                :data-text-field="(item.dataMapping&&item.dataMapping.label) || 'label'"
                :data-value-field="(item.dataMapping&&item.dataMapping.value) || 'value'"
                :option-label="item.optionLabel"
                :disabled="item.disabled"
                :auto-bind="item.autoBind"
                :auto-width="true"
                :readonly="item.readonly"
                :cascade-from="cascadeCheck(item)"
                :required="item.required"
                :change="item.change"
                :select="item.select"
                no-data-template="无数据"
              >
                <kendo-datasource
                  slot="kendo-datasource"
                  :ref="item.ref"
                  :type="item.dataType"
                  :server-filtering="true"
                  :transport-read-type="'POST'"
                  :transport-read-url="item.transportReadUrl"
                  :transport-parameter-map="item.parameterMap"
                  :schema-data="item.schema.data"
                />
              </kendo-dropdownlist>
              <kendo-dropdownlist
                v-if="!item.remoteData"
                :id="item.id"
                v-model="kendoUIParamsValue[item.paramName]"
                :name="item.name"
                :filter="item.filter||''"
                :data-source="kendoDataSources[item.dataSourceName]||[]"
                :data-text-field="(item.dataMapping&&item.dataMapping.label) || 'label'"
                :data-value-field="(item.dataMapping&&item.dataMapping.value) || 'value'"
                :option-label="'请选择'"
                :disabled="item.disabled"
                :auto-bind="item.autoBind"
                :auto-width="true"
                :readonly="item.readonly"
                :required="item.required"
                :change="item.change"
                :select="item.select"
                :cascade-from="cascadeCheck(item)"
                no-data-template="无数据"
              />
            </div>
            <div
              v-if="item.controlType === 'multiselect'"
              class="k-form-row-item"
            >
              <kendo-multiselect
                v-if="item.remoteData"
                :id="item.id"
                v-model="kendoUIParamsValue[item.paramName]"
                :name="item.name"
                :data-source-ref="item.ref"
                :data-text-field="(item.dataMapping&&item.dataMapping.label) || 'label'"
                :data-value-field="(item.dataMapping&&item.dataMapping.value)|| 'value'"
                :placeholder="'请选择'"
                :filter="'contains'"
                :option-label="item.optionLabel"
                :disabled="item.disabled"
                :auto-bind="item.autoBind"
                :auto-width="true"
                :readonly="item.readonly"
                :required="item.required"
                :change="item.change"
                :select="item.select"
                no-data-template="无数据"
              >
                <kendo-datasource
                  slot="kendo-datasource"
                  :ref="item.ref"
                  :type="item.dataType"
                  :server-filtering="false"
                  :transport-read-type="'POST'"
                  :transport-read-url="item.transportReadUrl"
                  :transport-parameter-map="item.parameterMap"
                  :schema-data="item.schema.data"
                />
              </kendo-multiselect>
              <kendo-multiselect
                v-if="!item.remoteData"
                :id="item.id"
                v-model="kendoUIParamsValue[item.paramName]"
                :name="item.name"
                :data-source="kendoDataSources[item.dataSourceName]||[]"
                :data-text-field="(item.dataMapping&&item.dataMapping.label) || 'label'"
                :data-value-field="(item.dataMapping&&item.dataMapping.value) || 'value'"
                :placeholder="'请选择'"
                :filter="'contains'"
                :option-label="item.optionLabel"
                :disabled="item.disabled"
                :auto-bind="item.autoBind"
                :auto-width="true"
                :readonly="item.readonly"
                :required="item.required"
                :change="item.change"
                :select="item.select"
                no-data-template="无数据"
              />
            </div>
            <div
              v-if="item.controlType === 'multicolumncombobox'"
              class="k-form-row-item"
            >
              <kendo-multicolumncombobox
                :id="item.id"
                v-model="kendoUIParamsValue[item.paramName]"
                :name="item.name"
                :required="item.required"
                :disabled="item.disabled"
                :readonly="item.readonly"
                :filter="'contains'"
                :change="item.change"
                :data-source-ref="item.dataSource"
                :data-text-field="item.dataMapping.label"
                :data-value-field="item.dataMapping.value"
                :auto-width="true"
                :auto-bind="item.autoBind"
                :value-primitive="true"
                :placeholder="'-请选择-'"
              >
                <kendo-datasource
                  :ref="item.dataSource"
                  :type="item.dataType"
                  :server-filtering="false"
                  :transport-read-url="item.transportReadUrl"
                  :transport-read-type="'POST'"
                  :transport-parameter-map="item.parameterMap"
                  :schema-data="item.schema.data"
                />
                <kendo-multicolumncombobox-column
                  v-for="(element,i) in item.column"
                  :key="i"
                  :field="element.field"
                  :title="element.title"
                  :width="element.width"
                />
              </kendo-multicolumncombobox>
            </div>
            <div
              v-if="item.controlType === 'dropdowntree'"
              class="k-form-row-item"
            >
              <dropdowntree
                v-if="item.remoteData"
                :id="item.id"
                v-model="kendoUIParamsValue[item.paramName]"
                :name="item.name"
                :data-source-ref="item.ref"
                :data-text-field="(item.dataMapping&&item.dataMapping.label) || 'label'"
                :data-value-field="(item.dataMapping&&item.dataMapping.value) || 'value'"
                :placeholder="'请选择'"
                :filter="'contains'"
                :option-label="item.optionLabel"
                :disabled="item.disabled"
                :auto-bind="item.autoBind"
                :auto-width="true"
                :readonly="item.readonly"
                :required="item.required"
                :change="item.change"
                :select="item.select"
                no-data-template="无数据"
              >
                <hierarchicaldatasource
                  slot="kendo-hierarchicaldatasource"
                  :ref="item.ref"
                  :transport-read-url="item.transportReadUrl"
                  :transport-read-data-type="'json'"
                  :transport-parameter-map="item.parameterMap"
                  :schema-model-id="item.schema.id"
                  :schema-model-has-children="item.schema.children"
                />
              </dropdowntree>
              <dropdowntree
                v-if="!item.remoteData"
                :id="item.id"
                v-model="kendoUIParamsValue[item.paramName]"
                :name="item.name"
                :data-source="kendoDataSources[item.dataSourceName]||[]"
                :data-text-field="(item.dataMapping && item.dataMapping.label) || 'label'"
                :data-value-field="(item.dataMapping && item.dataMapping.value) || 'value'"
                :placeholder="'请选择'"
                :filter="'contains'"
                :option-label="item.optionLabel"
                :disabled="item.disabled"
                :auto-bind="item.autoBind"
                :auto-width="true"
                :readonly="item.readonly"
                :required="item.required"
                :change="item.change"
                :select="item.select"
                no-data-template="无数据"
              />
            </div>
            <div v-if="item.controlType === 'numeric'" class="k-form-row-item">
              <kendo-numerictextbox
                :id="item.id"
                v-model="kendoUIParamsValue[item.paramName]"
                :name="item.name"
                :format="item.format || ''"
                :decimals="item.decimals || 2"
                :min="item.min || null"
                :max="item.max || null"
                :step="item.step || 1"
                :factor="item.factor || 1"
                :change="item.change"
                :spin="item.spin"
                :restrict-decimals="item.restrictDecimals || false"
                :readonly="item.readonly || false"
                :disabled="item.disabled"
                :required="item.required"
                :culture="'zh-CN'"
              />
            </div>
            <div
              v-if="item.controlType === 'datePicker'"
              class="k-form-row-item"
            >
              <kendo-datepicker
                :id="item.id"
                v-model="kendoUIParamsValue[item.paramName]"
                :name="item.name"
                :min="item.minDate || new Date(1971, 1, 1)"
                :max="item.maxDate || new Date(2099, 11, 30)"
                :depth="item.depth"
                :format="item.format"
                :date-input="true"
                :close="datepickerClose(item)"
                :change="item.change"
                :disable-dates="item.disableDates || null"
                :readonly="item.readonly"
                :required="item.required"
                :culture="'zh-CN'"
              />
            </div>
            <div
              v-if="item.controlType === 'dateTimePicker'"
              class="k-form-row-item"
            >
              <kendo-datetimepicker
                :id="item.id"
                v-model="kendoUIParamsValue[item.paramName]"
                :name="item.name"
                :min="item.minDate || new Date(1971, 1, 1, 0, 0)"
                :max="item.maxDate || new Date(2099, 11, 30, 12, 0)"
                :interval="item.interval"
                :format="item.format"
                :time-format="item.timeFormat"
                :date-input="false"
                :change="item.change"
                :disable-dates="item.disableDates || null"
                :readonly="item.readonly"
                :required="item.required"
                :culture="'zh-CN'"
              />
            </div>
            <div
              v-if="item.controlType === 'dateRangePicker'"
              class="k-form-row-item"
            >
              <kendo-daterangepicker
                :id="item.id"
                v-model="kendoUIParamsValue[item.paramName]"
                :name="item.name"
                :min="item.minDate || new Date(1971, 1, 1)"
                :max="item.maxDate || new Date(2099, 11, 30)"
                :depth="item.depth"
                :format="item.format"
                :date-input="item.dateInput"
                :close="daterangepickerClose(item)"
                :change="item.change"
                :disable-dates="item.disableDates || null"
                :readonly="item.readonly"
                :required="item.required"
                :culture="'zh-CN'"
              />
            </div>
            <div v-if="item.controlType === 'input'" class="k-form-row-item">
              <kendo-maskedtextbox
                :id="item.id"
                v-model="kendoUIParamsValue[item.paramName]"
                :name="item.name"
                :format="item.format"
                :required="item.required"
                :readonly="item.readonly"
                :disabled="item.disabled"
                :change="item.change"
                placeholder=""
              />
            </div>
            <div v-if="item.controlType === 'readonlySearch'" class="k-form-row-item">
              <!-- <k-readonlySearch
                :id="item.id"
                v-model="kendoUIParamsValue[item.paramName]"
                :name="item.name"
                :required="item.required"
                :on-click="item.onClick"
                placeholder=""
              /> -->
              <span class="k-textbox k-space-right" style="width: 100%;border:none">
                <kendo-maskedtextbox
                  v-model="kendoUIParamsValue[item.paramName]"
                  :name="item.name"
                  :required="item.required"
                  :readonly="item.readonly"
                  :change="item.change"
                  type="text"
                  style="width:100%"
                />
                <a v-if="item.disabled" class="k-icon k-i-search">&nbsp;</a>
                <a v-else-if="!item.disabled" class="k-icon k-i-search" @click="item.onClick">&nbsp;</a>
              </span>
            </div>
          </div>
          <!-- 特殊处理的页面表单要素 start -->
          <div v-if="item.genre === 'special'" class="k-form-row-special">
            <label class="k-form-row-special-label">
              <i
                v-if="item.required"
                style="color: red; font-size: 16px; vertical-align: middle"
              >*</i>
              {{ item.label }}
            </label>
            <div v-if="item.controlType === 'textarea'" class="k-form-row-special-item">
              <span v-if="item.required" class="k-widget k-textarea">
                <textarea
                  :id="item.id"
                  v-model="kendoUIParamsValue[item.paramName]"
                  :name="item.name"
                  required
                  :rows="item.rows||5"
                  :cols="128"
                  placeholder=""
                  style="resize:none"
                  :disabled="item.disabled"
                  :readonly="item.readonly"
                  class="k-input k-widget k-textarea"
                />
              </span>
              <span v-if="!item.required" class="k-widget k-textarea">
                <textarea
                  :id="item.id"
                  v-model="kendoUIParamsValue[item.paramName]"
                  :name="item.name"
                  :rows="item.rows||5"
                  placeholder=""
                  style="resize:none"
                  class="k-input k-widget k-textarea"
                />
              </span>
            </div>
            <div
              v-if="item.controlType === 'multiselect'"
              class="k-form-row-special-item"
            >
              <span class="k-widget k-textarea">
                <kendo-multiselect
                  v-if="item.remoteData"
                  :id="item.id"
                  v-model="kendoUIParamsValue[item.paramName]"
                  :name="item.name"
                  :data-source-ref="item.ref"
                  :data-text-field="(item.dataMapping&&item.dataMapping.label) || 'label'"
                  :data-value-field="(item.dataMapping&&item.dataMapping.value)|| 'value'"
                  :placeholder="'请选择'"
                  :filter="'contains'"
                  :option-label="item.optionLabel"
                  :disabled="item.disabled"
                  :auto-bind="item.autoBind"
                  :auto-width="true"
                  :readonly="item.readonly"
                  :required="item.required"
                  :change="item.change"
                  :select="item.select"
                  no-data-template="无数据"
                >
                  <kendo-datasource
                    slot="kendo-datasource"
                    :ref="item.ref"
                    :type="item.dataType"
                    :server-filtering="false"
                    :transport-read-type="'POST'"
                    :transport-read-url="item.transportReadUrl"
                    :transport-parameter-map="item.parameterMap"
                    :schema-data="item.schema.data"
                  />
                </kendo-multiselect>
              </span>
            </div>
            <div v-if="item.controlType === 'editor'" class="k-form-row-special-item">
              <span v-if="item.required" class="k-widget k-textarea">
                <editor
                  :id="item.id"
                  :ref="item.ref"
                  v-model="kendoUIParamsValue[item.paramName]"
                  :name="item.name"
                  :resizable-content="true"
                  :resizable-toolbar="true"
                  :pdf="item.pdf"
                  :image-browser="item.imageBrowser"
                  :file-browser="item.fileBrowser"
                  :value="kendoUIParamsValue[item.paramName]"
                  :rows="item.rows"
                  :cols="item.columns"
                >
                  <editor-tool v-for="(_item, _index) in item.tools" :key="_index" :name="_item" />
                </editor>
              </span>
              <span v-if="!item.required" class="k-widget k-textarea">
                <editor
                  :id="item.id"
                  :ref="item.ref"
                  v-model="kendoUIParamsValue[item.paramName]"
                  :name="item.name"
                  :resizable-content="true"
                  :resizable-toolbar="true"
                  :pdf="item.pdf"
                  :image-browser="item.imageBrowser"
                  :file-browser="item.fileBrowser"
                  :value="kendoUIParamsValue[item.paramName]"
                  :rows="item.rows"
                  :cols="item.columns"
                >
                  <editor-tool v-for="(_item, _index) in item.tools" :key="_index" :name="_item" />
                </editor>
              </span>
            </div>
            <div v-if="item.controlType==='upload'" class="k-form-row-special-item">
              <upload
                :ref="item.ref"
                v-model="kendoUIParamsValue[item.paramName]"
                :batch="true"
                :multiple="item.multiple"
                :auto-upload="false"
                :name="'files'"
                :files="kendoUIParamsValue[item.paramName]"
                :disabled="item.disabled"
                :readonly="item.readonly"
                :localization="{
                  uploadSuccess:'文件上传成功！',
                  uploadFail:'文件上传失败！'
                }"
                :success="function(e){
                  if(e.operation==='upload'){
                    const result = e.response.data
                    const files = e.files
                    result.forEach(element=>{
                      element.name=element.fileName
                      element.size=element.fileSize
                      element.extension=element.fileExtensionName
                    })
                    kendoUIParamsValue[item.paramName] = result
                  }
                }"
                :async-batch="false"
                :async-auto-upload="false"
                :async-save-url="item.asyncSaveUrl"
                :async-remove-url="item.asyncRemoveUrl"
              />
            </div>
          </div>
          <!-- 特殊处理的页面表单要素 end -->
        </div>
      </div>
    </form>
    <div class="k-form-btn-operate">
      <k-button v-for="(item,index) in kendoForm.buttons" :key="index" v-repeatClick :class="item.class" :icon="item.icon" @click="item.click(kendoUIParamsValue,validator)">
        {{ item.name }}
      </k-button>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  import { Editor, EditorTool } from '@progress/kendo-editor-vue-wrapper'
  import { Upload } from '@progress/kendo-upload-vue-wrapper'
  import { Button } from '@progress/kendo-buttons-vue-wrapper'
  import { DropDownTree } from '@progress/kendo-dropdowntree-vue-wrapper'
  import { HierarchicalDataSource } from '@progress/kendo-datasource-vue-wrapper'
  export default {
    name: 'KendoForm',
    components: {
      'k-button': Button,
      'upload': Upload,
      'dropdowntree': DropDownTree,
      'hierarchicaldatasource': HierarchicalDataSource,
      'editor': Editor,
      'editor-tool': EditorTool
    },
    props: {
      kendoFormItems: {
        type: Array,
        default() {
          return []
        }
      },
      kendoParamsValue: {
        type: Object,
        default() {
          return {}
        }
      },
      kendoDataSources: {
        type: Object,
        default() {
          return {}
        }
      },
      kendoForm: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        kendoUIFormItems: this.kendoFormItems,
        kendoUIParamsValue: this.kendoParamsValue,
        validator: '',
        setup: this.initFormValidateRules()
      }
    },
    watch: {
      kendoFormItems: {
        handler() {
          return this.kendoFormItemsChange()
        },
        deep: true
      },
      kendoParamsValue: {
        handler() {
          return this.kendoParamsValueChange()
        },
        deep: true
      }
    },
    mounted() {
      this.$nextTick(() => {
        // eslint-disable-next-line no-undef
        this.validator = kendo.jQuery(this.$refs[this.kendoForm.ref]).getKendoValidator()
        const _that = this
        this.kendoUIFormItems.forEach(item => {
          if (item.controlType === 'upload') {
            var upload
            if (item.controlType === 'upload') {
              upload = _that.$refs[item.ref][0].kendoWidget()
            }
            upload._module.postFormData = function(url, data, fileEntry, xhr) {
              var module = this
              var files = fileEntry.data('fileNames')
              fileEntry.data('request', xhr)

              xhr.addEventListener('load', function(e) {
                // eslint-disable-next-line no-useless-call
                module.onRequestSuccess.call(module, e, fileEntry)
              }, false)

              xhr.addEventListener('error', function(e) {
                // eslint-disable-next-line no-useless-call
                module.onRequestError.call(module, e, fileEntry)
              }, false)

              xhr.upload.addEventListener('progress', function(e) {
                // eslint-disable-next-line no-useless-call
                module.onRequestProgress.call(module, e, fileEntry)
              }, false)

              xhr.open('POST', url, true)
              xhr.withCredentials = this.upload.options.async.withCredentials

              var accept = this.upload.options.async.accept
              if (accept) {
                xhr.setRequestHeader('Accept', accept)
              }
              if (_that.validator.validate()) {
                _that.kendoUIParamsValue.files = files
                // data.append('parameterMap', JSON.stringify(_that.kendoUIParamsValue))
                data.append('parameterMap', JSON.stringify(_that.kendoUIParamsValue))
                // this.$set(xhr.xhr.config, 'body', JSON.stringify(_that.kendoUIParamsValue))
                xhr.send(data)
              } else {
                upload._setUploadErrorState(fileEntry)
              }
            }
            upload._onUploadSuccess = function(e, response, xhr) {
              var that = this
              var SUCCESS = 'success'
              var REMOVE = 'remove'
              // eslint-disable-next-line no-undef
              var fileEntry = $(e.target).closest('.k-file')
              var files = fileEntry.data('fileNames')
              var fileInfo = fileEntry.find('.k-file-information')
              var fileSize = fileEntry.find('.k-file-size')
              var prevented
              if (response.code !== 200) {
                prevented = true
                _that.$KendoNotify({
                  title: '错误信息:' + response.code,
                  message: response.message
                }, 'error')
              } else {
                prevented = that.trigger(SUCCESS, {
                  files: fileEntry.data('fileNames'),
                  response: response,
                  operation: 'upload',
                  XMLHttpRequest: xhr
                })
              }

              if (prevented) {
                that._setUploadErrorState(fileEntry)
              } else {
                that._fileState(fileEntry, 'uploaded')
                fileEntry.removeClass('k-file-progress').addClass('k-file-success')

                if (fileInfo.length > 0) {
                  fileInfo.addClass('k-hidden')
                    .after('<span class="k-file-validation-message k-text-success">' + files.length + ' ' + that.localization.uploadSuccess + '</span>')
                } else if (fileSize.length > 0) {
                  fileSize.addClass('k-hidden')
                    .after('<span class="k-file-validation-message k-text-success">' + that.localization.uploadSuccess + '</span>')
                }

                that._updateHeaderUploadStatus()

                if (that._supportsRemove()) {
                  that._fileAction(fileEntry, REMOVE)
                } else {
                  that._clearFileAction(fileEntry)
                }
              }

              that._hideUploadProgress(fileEntry)
              that._checkAllComplete()
            }
            upload._submitRemove = function(fileNames, eventArgs, onSuccess, onError) {
              var params = Object.assign(eventArgs.files[0], {})
              // eslint-disable-next-line no-undef
              _that.$post(this.options.async.removeUrl, params).then(res => {
                onSuccess()
              }).catch(_ => {
                onError()
              })
            }
          }
        })
      })
    },
    methods: {
      isEmpty(str) {
        if (str == null || typeof str === 'undefined' || str === '') {
          return true
        }
        return false
      },
      kendoParamsValueChange() {
        this.kendoUIParamsValue = this.kendoParamsValue
      },
      kendoFormItemsChange() {
        this.kendoUIFormItems = this.kendoFormItems
      },
      // 初始化自定义表单校验规则 (仅做正则和必输校验)
      initFormValidateRules() {
        const _that = this
        const setUp = {
          rules: {
            required(input) {
              if (input[0]['required']) {
                const NAME = input.attr('name')
                if (input.is('[name=' + NAME + '') && input.val() !== '' && _that.kendoUIParamsValue[NAME] !== '') {
                  return true
                } else {
                  return false
                }
              } else {
                return true
              }
            }
          },
          messages: {
            required: function(input) {
              const NAME = input.attr('name')
              const newItem = _that.kendoUIFormItems.filter(s => s.name === NAME)
              if (newItem.length > 0) {
                const LABEL = newItem[0]['label']
                return `${LABEL} 是必输项！`
              } else {
                return ''
              }
            }
          }
        }
        const rules = this.kendoForm.rules
        if (rules && rules.length > 0) {
          rules.forEach(element => {
            this.$set(setUp.rules, 'regexp', element['regexp'])
            this.$set(setUp.messages, 'message', element['message'])
          })
        }
        return setUp
      },
      cascadeCheck(item) {
        if (item.cascade) {
          return item.id
        } else {
          return null
        }
      },
      // kendo toString
      kendoToString(value, format) {
        // eslint-disable-next-line no-undef
        return kendo.toString(value, format)
      },
      kendoParseDate(date, format) {
        // eslint-disable-next-line no-undef
        return kendo.parseDate(date, format)
      },
      datepickerClose(item) {
        this.kendoUIParamsValue[item.paramName] = this.dateFormat(this.kendoUIParamsValue[item.paramName], item.format)
      },
      daterangepickerClose(item) {
        console.log(item)
      }
    }
  }
</script>

<style>
.kendoForm .k-form-btn-operate{
    width: 100%;
    float: left;
    text-align: right;
    margin: auto;
    padding: 20px 0px 20px 0px;
    border-top: 1px solid #eee;
}
.kendoForm .k-form-btn-operate button{
  margin-left: 10px;
}
.k-form-div .k-form-item{
  display: inline-block;
  vertical-align: top;
}
.k-form-div .special{
  display: inline-block;
  width: 100%;
}

.k-form-div .k-form-row {
    min-height: 50px;
    float: left;
}

.k-form-div .k-form-row .k-form-row-label {
  width: 180px;
  float: left;
  text-align: right;
  padding: 0 5px 0 0;
  vertical-align: middle;
  line-height: 30px;
  font-size: 13px;
  font-weight: 400;
  font-family: sans-serif;
  color: #000;
}
.k-form-div .k-form-row-special {
    width: 100%;
    min-height: 50px;
    float: left;
    margin-bottom: 20px;
}
.k-form-div .k-form-row-special .k-form-row-special-label {
  width: 180px;
  float: left;
  text-align: right;
  padding: 0 5px 0 0;
  vertical-align: middle;
  line-height: 30px;
  font-size: 13px;
  font-weight: 400;
  font-family: sans-serif;
  color: #000;
}
.k-form-div .k-form-row-special .k-form-row-special-item .k-form-error{
  position: absolute;
  z-index: 1;
}

.k-form-div .k-form-row-special .k-form-row-special-item .k-form-error{
  position: absolute;
  z-index: 1;
}

.k-form-div .k-form-row-special .k-form-row-special-item .k-textarea{
  position: relative;
  border-color: #E4E7ED;
  border-radius: 4px;
  float: left;
  width: 73.2%;
}

.k-form-div .k-form-row-special .k-form-row-special-item .k-textarea>textarea{
  width: 100%;
  border: none;
}
.k-form-div .k-form-row-special .k-form-row-special-item .k-textarea select{
  width: 100%;
  border: none;
}

.k-form-div .k-form-row-special .k-form-row-special-item .k-textarea>.k-form-error{
  position: absolute;
  top: 100%;
}
.k-form-div .k-form-row-special .k-form-row-special-item .k-multiselect>select{
  width: 100%;
  border: none;
}
.k-form-div .k-form-row-special .k-form-row-special-item .k-upload{
  float: left;
  width: 73.2%;
}
.k-form-div .k-form-row .k-form-row-item {
  width: 180px;
  float: left;
  margin-bottom: 10px;
}
.k-form-div .k-form-row .k-form-row-item .k-space-right .k-form-error{
  position: absolute;
  top: 100%;
}
.k-form-div .k-form-row .k-form-row-special-item {
  float: left;
  margin-bottom: 10px;
}

.k-textbox:disabled, .k-textbox[disabled], .k-textbox.k-state-disabled{
  background:#e9e7e7
}

</style>
